
import React, { memo } from 'react';
import sty from './sty.module.css';
import cs from 'classnames';
import { artistCategories } from '@/api/local-data';
import { useSelector } from 'react-redux';

import { useDispatch, shallowEqual } from 'react-redux';
import { changeCurrentAreaAction, changeCurrentTypeAction } from '../../store/actionCreators';

const Artist = () => {
  const { currentType, currentArea } = useSelector(state => ({
    currentType: state.getIn(['artist', 'currentType']),
    currentArea: state.getIn(['artist', 'currentArea'])
  }), shallowEqual)
  const dispatch = useDispatch();
  const selectArtist = (area, type) => {
    console.log(area, type);
    dispatch(changeCurrentAreaAction(area));
    dispatch(changeCurrentTypeAction(type))
  }


  const renderArtist = (artists, area) => {
    return (< >
      {
        artists.map(v => {
          const isSelect = currentArea === area && currentType.type === v.type;
          return (<div key={v.name} className={cs(sty.categoryItem, { 'category-active': isSelect })} >
            <span className='singer_sprite' onClick={() => selectArtist(area, v)}>{v.name}</span>
          </div>)

        }
        )
      }
    </ >)
  }

  return <div className={sty.categoryWrap}>
    {
      artistCategories.map(v => (<div
        className={sty.section}
        key={v.area}
      >
        <h3 className={sty.title}>{v.title}</h3>
        {
          renderArtist(v.artists, v.area)
        }
      </div>))
    }  </div>
}
export default memo(Artist)